﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>出库详单</title>
    <script src="/Apm/js/CMSEdit.js"></script>
    <style>
        .wp-form-center {
            display:flex;
            height:40rem;
            width:100%;
            margin-bottom:1rem;
            border:1px solid #eee;
        }
        .wp-form-center-left {
            display:flex;
            border-right: 1px solid #eee;
        }
        .wp-form-center-right {
            overflow-y: auto;
            padding: 2rem;
            border-left: 1px solid #eee;
        }
        .center-right-div {
            display: flex;
            flex-wrap: wrap;
        }
        .page-flowerlist {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0.5rem 1.5rem;
        }

        .page-flowerlist img {
            width: 4rem;
            height: 4rem;
            border-radius: 0.8rem;
        }

        .page-flowerlist span {
            font-family: '楷体';
            font-size: 1.2rem;
            font-weight: bold;
            padding-left: 2rem;
        }

        .page-li {
            background-color: #f2f2f2;
            border-bottom: solid #fff 2px;
        }

        .page-this {
            background-color: #5FB878;
        }
        .wp-module {
            margin:1rem;
            width: 16rem;
            height:10rem;
            border: 1px solid #eee;
        }
        .wp-module-label {
            display: flex;
            font-size: 1rem;
            padding: 0.8rem;
            color: #fff;
            border-bottom: 1px solid #eee;
        }
        .wp-module-div{
            padding:0.4rem;
        }
        #FlowerList {
            width: 14rem;
            overflow-y: auto;
        }
        
    </style>
</head>
<body>
    <div class="page">
        <div id="title" class="title">

        </div>
        
        <div class="layui-form layui-form-pane edit-form">
            <div class="wp-form-top">
                <div class="layui-form-item">
                    <label class="layui-form-label">仓库</label>
                    <div class="layui-input-block">
                        <input id="WareHouseName" type="text"  autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">经销商</label>
                    <div class="layui-input-block">
                        <input id="CustomerName" type="text" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出库时间</label>
                    <div class="layui-input-block">
                        <input id="Addtime" type="text" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
            </div>
            <div class="wp-form-center">
                <div class="wp-form-center-left">
                    <ul id="FlowerList">
                        <!--<li id="00001" class="page-li page-this">
                            <div class="page-flowerlist">
                                <img lay-src="/image/login.jpg" />
                                <span>张三</span>
                            </div>
                        </li>
                        <li class="page-li">
                            <div class="page-flowerlist">
                                <img src="/image/boy.png" />
                                <span>张三风</span>
                            </div>
                        </li>-->
                        
   
                    </ul>
                </div>
                <div class="wp-form-center-right">
                    <div class="center-right-div">
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-orange">A类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库数量</label>
                                    <div class="layui-input-block">
                                        <input id="NumA" type="text" name="NumA" required lay-verify="number" placeholder="请输入出库数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库价格</label>
                                    <div class="layui-input-block">
                                        <input id="PriceA" type="text" name="PriceA" required lay-verify="number" placeholder="请输入出库价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-green">B类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库数量</label>
                                    <div class="layui-input-block">
                                        <input id="NumB" type="text" name="NumB" required lay-verify="number" placeholder="请输入出库数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库价格</label>
                                    <div class="layui-input-block">
                                        <input id="PriceB" type="text" name="PriceB" required lay-verify="number" placeholder="请输入出库价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-blue">C类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库数量</label>
                                    <div class="layui-input-block">
                                        <input id="NumC" type="text" name="NumC" required lay-verify="number" placeholder="请输入出库数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库价格</label>
                                    <div class="layui-input-block">
                                        <input id="PriceC" type="text" name="PriceC" required lay-verify="number" placeholder="请输入出库价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-red">D类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库数量</label>
                                    <div class="layui-input-block">
                                        <input id="NumD" type="text" name="NumD" required lay-verify="number" placeholder="请输入出库数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出库价格</label>
                                    <div class="layui-input-block">
                                        <input id="PriceD" type="text" name="PriceD" required lay-verify="number" placeholder="请输入出库价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="wp-form-bottom">
                <div class="layui-form-item">
                    <label class="layui-form-label">应收货款</label>
                    <div class="layui-input-block">
                        <input id="Ys" type="text"  required lay-verify="number"  autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">实收货款</label>
                    <div class="layui-input-block">
                        <input id="Ss" type="text" onclick="FnEndSubmit()" onchange="FnWeiShou()"  placeholder="请输入实收货款" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">未收货款</label>
                    <div class="layui-input-block">
                        <input id="Ws" type="text"  required lay-verify="number" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
            </div>
            
            <button id="submit" lay-submit lay-filter="submit" style="display:none;"></button>
        </div>

        <div class="edit-submit">
            <button id="truebutton" class="layui-btn layui-btn-lg">提交</button>
        </div>
    </div>
</body>
</html>
<script>
    var FlowerType = '';
    var OutboundGuid = MyPublic.getUrlParam('OutboundGuid');//主表guid
    var FlowerTypeOver = '';
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer,
            form = layui.form;

        var type = MyPublic.getUrlParam('type');
        
       
        switch (type) {
            case 'add':
                $("#title").html('新增出库详单');
                
                break;
            case 'edit':
                $("#title").html('编辑出库详单');
                
                break;
        }
        BindDataModel(OutboundGuid);
        GetFlowerTypeList();
        $("#truebutton").click(function () {
            //主表更新
            var json = new Object();
            var ys = $("#Ys").val();
            var ss = $("#Ss").val();
            var ws = $("#Ws").val();
            if (ys == "") {
                layer.msg('应收货款不能为空');
                return;
            }
            if (ss == "") {
                layer.msg('实收货款不能为空');
                return;
            }
            if (ws == "") {
                layer.msg('未收货款不能为空');
                return;
            }
            json.Guid = OutboundGuid;
            json.Ys = ys;
            json.Ss = ss;
            json.ws = ws;
            //console.log(json);
            ajaxpost({
                url: 'api/FriendFlower/OrderOutboundUpdate?Token=' + MyPublic.getToken(),
                data: json,
                success: function (data) {
                    data = JSON.parse(data);
                    if (data.code === "10001") {
                        //当你在iframe页面关闭自身时
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    }
                    else {
                        layer.msg(data.msg);
                    }
                    
                }
            })
        })

        

        //添加或修改
        form.on('submit(submit)', function (data) {
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //console.log("提交："+FlowerType);
            var json = data.field;
            json.OutboundGuid = OutboundGuid;
            json.FlowerType = FlowerType;
            console.log(json);
            ajaxpost({
                url: 'api/FriendFlower/OrderOutboundInfoCreateOrUpdate?Token=' + MyPublic.getToken(),
                data: json,
                success: function (data) {
                    data = JSON.parse(data);
                    
                    if (data.code === "0") {
                        //花卉切换
                        $("#FlowerList li").removeClass("page-this");
                        $("#" + FlowerTypeOver + "").addClass("page-this");
                        FlowerType = FlowerTypeOver;
                        //console.log("获取对应表：" + FlowerType);
                        GetOutboundInfoModel(OutboundGuid, FlowerTypeOver);

                        //每次提交获取总价
                        $("#Ys").val(data.data.TotalPrice);
                        
                    }
                    else {
                        layer.msg(data.msg);
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    });

    function Clickli(id) {
        FlowerTypeOver = id;
        $("#submit").click();
        
    }
    /**
     * 计算未收货款
     */
    function FnWeiShou() {

        layui.use('layer', function () {
            var layer = layui.layer;

            var ys = $("#Ys").val();
            var ss = $("#Ss").val();
            var ws = ys - ss;
            if (ws < 0) {

                $("#Ws").val('');
                layer.msg('实收货款不能大于应收货款');
                
            }
            else {
                $("#Ws").val(ws);
            }

        });
        
    }
    /**
     * 最后一次提交获取总价
     */
    function FnEndSubmit() {
        $("#submit").click();
    }
    /**
     * 获取花卉类型列表
     */
    function GetFlowerTypeList() {
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/FriendFlower/FlowerTypeList?Token=' + MyPublic.getToken(),
                success: function (data) {
                    var pagetotal = Math.ceil(data.length / pageSize);//总页数

                    flow.load({
                        elem: '#FlowerList',
                        isLazyimg: true,//开启图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
                                //组合html
                                if (index === 0) {
                                    lis.push('<li id="' + data[index].Guid + '" class="page-li page-this" onclick="Clickli(this.id)">');
                                }
                                else {
                                    lis.push('<li id="' + data[index].Guid + '" class="page-li" onclick="Clickli(this.id)">');
                                }
                                lis.push('<div class="page-flowerlist">');
                                if (data[index].PictureUrl === "") {
                                    lis.push('<img lay-src="/image/notp.png" />');
                                }
                                else {
                                    lis.push('<img lay-src="' + ApiURL + data[index].PictureUrl + '" />');
                                }

                                lis.push('<span>' + data[index].ChinaName + '</span>');
                                lis.push('</div>');
                                lis.push('</li>');
                            }

                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    //初始化选择第一条花卉guid
                    var id = data[0].Guid;
                    FlowerType = id;
                    //console.log("初始化获取："+FlowerType);
                    GetOutboundInfoModel(OutboundGuid, id);
                }
            })
        });
    }
   
    /**
     * 页面绑定数据
     * @param id
     */
    function BindDataModel(guid) {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                form = layui.form;

            ajaxget({
                url: 'api/FriendFlowerPublic/GetOrderOutboundModel?Guid=' + guid,
                success: function (data) {
                    $("#CustomerName").val(data.CustomerName);
                    $("#WareHouseName").val(data.WareHouseName);
                    $("#Addtime").val(MyPublic.getFnDate(data.Addtime));
                    
                }
            })
        });
    }
    
    /**
     * 获取相应详单数据
     * @param infoguid
     * @param flowertype
     */
    function GetOutboundInfoModel(infoguid, flowertype) {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                form = layui.form;

            ajaxget({
                url: 'api/FriendFlowerPublic/GetOrderOutboundInfoModel?FlowerType=' + flowertype + '&OutboundGuid=' + infoguid,
                success: function (data) {
                    if (data != null) {
                       
                        $("#NumA").val(data.NumA);
                        $("#NumB").val(data.NumB);
                        $("#NumC").val(data.NumC);
                        $("#NumD").val(data.NumD);
                        $("#PriceA").val(data.PriceA);
                        $("#PriceB").val(data.PriceB);
                        $("#PriceC").val(data.PriceC);
                        $("#PriceD").val(data.PriceD);
                        
                    }
                    else {
                        $("#NumA").val('');
                        $("#NumB").val('');
                        $("#NumC").val('');
                        $("#NumD").val('');
                        $("#PriceA").val('');
                        $("#PriceB").val('');
                        $("#PriceC").val('');
                        $("#PriceD").val('');
                    }
                    
                }
            })
        });
    }
</script>